<template>
  <div>
    <div style="width: 100%;border-bottom: 1px solid #e5e5e5;overflow: hidden;margin-bottom: 20px;padding-bottom: 20px">
      <div style="width: 30%;height: 10%;float: left;">
        <h1 style="font-size: 40px;color: #00BF6A">{{ cc.toString().substring(0,3) }}超棒</h1>
        <h3>高于77%同城酒店</h3>
      </div>
      <Scsecharts>

      </Scsecharts>
    </div>
    <div style="width: 100%;">
      <div>
        <!-- 使用 v-for 循环渲染每条评论 -->
        <div v-for="(comment, index) in comments" :key="index">
          <!-- 评论者信息部分 -->
          <div>
        <span style="width: 36px;height: 36px;border-radius: 50%;overflow: hidden;display: inline-block;margin-right: 10px">
          <img :src="comment.userAvatar" alt="">
        </span>
            <div style="display: inline-block;width: 117px;height: 42px">
              <p>{{ comment.userName }}</p>
              <p>{{ comment.roomType }}</p>
            </div>
            <div style="display: inline-block;float: right">
              <h3>{{ comment.rating }}</h3>
            </div>
          </div>
          <!-- 评论内容部分 -->
          <div>
            <p>{{ comment.content }}</p>
            <p>
              <!-- 使用 v-for 循环渲染评论中的图片 -->
              <img v-for="(image, imgIndex) in comment.images" :key="imgIndex" :src="image" alt="" style="margin-right: 10px">
            </p>
            <p>{{ comment.date }} <span>评论</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref,inject,computed } from 'vue';
import Scsecharts from '@/views/scs/Scsecharts.vue';
import Echarts from "../../../views/scs/Scsecharts.vue";

const pubScore = inject("pubScore") //获取父组件传递的值

let cc = computed(() => pubScore.value);
//截断保留一位小数,不想四舍五入


console.log(cc)

const comments = ref([
  {
    userAvatar: 'https://m.elongstatic.com/hotel_pc_i18n/product/_nuxt/userHead.0-0-3-213881db..svg',
    userName: '会员2131',
    roomType: '双床房',
    rating: '5.0',
    content: '酒店位置好，服务态度好，早餐很棒，房间很干净，性价比高，下次还会来',
    images: [
      'https://pavo.elongstatic.com/i/DP120_120/nw_1AU5DWLHPLW.jpg',
      'https://pavo.elongstatic.com/i/DP120_120/nw_1AU5E79cuIg.jpg',
      'https://pavo.elongstatic.com/i/DP120_120/nw_1AU5DOudzRC.jpg'
    ],
    date: '2025-01-01'
  }
]);
</script>

<style>

</style>